<script setup>
import useTokenStore from '@/stores/token';
import { useDebounceFn } from '@vueuse/core'
import { ElMessage } from 'element-plus';
import { ref } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter()

const tokenStore = useTokenStore()
const logout = useDebounceFn(()=>{
    tokenStore.logoutUser()
    ElMessage({
        message: "登出成功",
        type: 'success',
        duration: 3000
    })
    router.push({name:"login"})
}, 500)

const activeTab = ref("")
const onTabChange = (page) => {
    router.push(`/home/${page}`)
}
</script>

<template>
    <el-container id="home-container">
        <el-header>
            <div id="logout-layout">
                <el-link @click="logout" type="primary" style="font-size: large;" never>登出</el-link>
            </div>
            <div id="tab-layout">
                <el-tabs v-model="activeTab" class="tabs-style" @tab-change="onTabChange" tab-position="bottom">
                    <el-tab-pane label="知识库" name="knowledge" style="font-size: small;"></el-tab-pane>
                    <el-tab-pane label="聊天助理" name="chat"></el-tab-pane>
                </el-tabs>
            </div>
        </el-header>
        <el-main>
            <router-view></router-view>
        </el-main>
    </el-container>
</template>

<style scoped>
#home-container {
    height: 100vh;
    width: 100%;
    min-width: 800px;
    position: absolute;
}

.el-header {
    position: relative;
}

#logout-layout {
    z-index: 2;
    position: absolute;
    right: 40px;
    bottom: 15px;
}

#tab-layout {
    z-index: 1;
    position: absolute;
    width: 100%;
    left: 0px;
    bottom: 0px;
}

.tabs-style {
    color: #6b778c;
    margin: 0px;
    font-size: large;
    font-weight: 600;
}

#tab-layout :deep(.el-tabs__nav-wrap) {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
}

#tab-layout :deep(.el-tabs__item) {
  font-size: medium !important;
}
</style>